<template>
  <div ref="myDiv" class="radar-echart" />
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'
// 抽离封装echarts实例对象
import radarData from './radarData'
export default {
  name: 'IhrmRadar',

  data() {
    return {}
  },
  created() {
    // 重新渲染图表
    this.initData()
  },
  mounted() {
    // 渲染图表
    this.$nextTick(() => {
      this.drawEcharts()
    })
  },
  methods: {
    // 渲染图表
    drawEcharts() {
      this.myChart = echarts.init(this.$refs.myDiv)
      // 绘制图表
      this.myChart.setOption(radarData)
    },
    // 模拟请求接口获取数据并赋值到对应实例数据
    initData() {
      setTimeout(() => {
        const value1 = [10, 1, 100, 5, 100, 0]
        const value2 = [50, 50, 50, 50, 50, 10]
        radarData.series[0].data[0].value = value1
        radarData.series[0].data[1].value = value2
        this.myChart.setOption(radarData)
      }, 2000)
    }
  }
}
</script>

<style lang="scss" scoped>
.radar-echart {
    width: 600px;
    height: 400px;
}
</style>
